<template>
    <el-container>
        <el-aside width="20%">
            <el-container>
                <el-header>
                <div class="right-panel">
                    <div class="right-panel-search">
                        <el-input v-model="search.title_keywords" placeholder="请输入设备关键词" clearable @change="upsearch"></el-input>
                        <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
                    </div>
                </div>
            </el-header>
            <el-main class="nopadding">
                <scTable ref="table" :apiObj="apiObj" row-key="id" highlight-current-row @row-click="selectionChange" stripe remoteSort remoteFilter border>
                    <el-table-column type="selection" width="50" reserve-selection align="center"></el-table-column>
                    <el-table-column label="设备部门" prop="dept_name" align="center"></el-table-column>
                    <el-table-column label="设备编码" prop="code" align="center"></el-table-column>
                    <el-table-column label="设备名称" prop="title" align="center"></el-table-column>
                </scTable>
            </el-main>
            </el-container>
        </el-aside>
        <el-container>
            <el-header>
                <div class="right-panel">
                    <div class="right-panel-search">
                        <el-date-picker v-model="search.fdatetime" :value-format="'YYYY-MM-DD'" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 230px" />
                        <el-button type="primary" icon="el-icon-search" @click="getDate"></el-button>
                    </div>
                </div>
            </el-header>
            <el-main class="nopadding">
                <scTable ref="table" :data="data" stripe remoteSort remoteFilter border hidePagination>
                    <el-table-column label="日期" prop="FDATETIME" align="center" width="150"></el-table-column>
                    <el-table-column :label="list.FVALUE1" prop="FVALUE1" align="center" width="90"></el-table-column>
                    <el-table-column :label="list.FVALUE2" prop="FVALUE2" align="center" width="90"></el-table-column>
                    <el-table-column :label="list.FVALUE3" prop="FVALUE3" align="center" width="90"></el-table-column>
                    <el-table-column :label="list.FVALUE4" prop="FVALUE4" align="center" width="90"></el-table-column>
                    <el-table-column :label="list.FVALUE5" prop="FVALUE5" align="center" width="90"></el-table-column>
                    <el-table-column :label="list.FVALUE6" prop="FVALUE6" align="center" width="90"></el-table-column>
                    <el-table-column :label="list.FVALUE7" prop="FVALUE7" align="center" width="90"></el-table-column>
                    <el-table-column :label="list.FVALUE8" prop="FVALUE8" align="center" width="90"></el-table-column>
                    <el-table-column :label="list.FVALUE9" prop="FVALUE9" align="center" width="90"></el-table-column>
                    <el-table-column :label="list.FVALUE10" prop="FVALUE10" align="center" width="90"></el-table-column>
                    <el-table-column :label="list.FVALUE11" prop="FVALUE11" align="center" width="90"></el-table-column>
                    <el-table-column :label="list.FVALUE12" prop="FVALUE12" align="center" width="90"></el-table-column>
                    <el-table-column :label="list.FVALUE13" prop="FVALUE13" align="center" width="90"></el-table-column>
                    <el-table-column :label="list.FVALUE14" prop="FVALUE14" align="center" width="90"></el-table-column>
                    <el-table-column :label="list.FVALUE15" prop="FVALUE15" align="center" width="90"></el-table-column>
                    <el-table-column :label="list.FVALUE16" prop="FVALUE16" align="center" width="90"></el-table-column>
                    <el-table-column :label="list.FVALUE17" prop="FVALUE17" align="center" width="90"></el-table-column>
                    <el-table-column :label="list.FVALUE18" prop="FVALUE18" align="center" width="90"></el-table-column>
                    <el-table-column :label="list.FVALUE19" prop="FVALUE19" align="center" width="90"></el-table-column>
                    <el-table-column :label="list.FVALUE20" prop="FVALUE20" align="center" width="90"></el-table-column>
                    <el-table-column :label="list.FVALUE21" prop="FVALUE21" align="center" width="90"></el-table-column>
                    <el-table-column :label="list.FVALUE22" prop="FVALUE22" align="center" width="90"></el-table-column>
                    <el-table-column :label="list.FVALUE23" prop="FVALUE23" align="center" width="90"></el-table-column>
                    <el-table-column :label="list.FVALUE24" prop="FVALUE24" align="center" width="90"></el-table-column>
                </scTable>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
    export default {
    name: 'selectFilter',
    data() {
        return {
            dialog:{
                show:false
            },
            apiObj:this.$API.jiankong.correspond.list,
            search: {
				code: "",
				fdatetime: [],
			},
            data: [],
            selection: [],
            list:{},
        };
    },
    mounted() {
        this.getMonth()
    },
    methods: {
        getMonth(){
            var today = new Date();
            var firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
            var lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 1);
            lastDayOfMonth.setDate(lastDayOfMonth.getDate() - 1);
            var formattedFirstDay = formatDate(firstDayOfMonth);
            var formattedLastDay = formatDate(lastDayOfMonth);
            function formatDate(date) {
                var year = date.getFullYear();
                var month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从 0 开始，需要加 1
                var day = date.getDate().toString().padStart(2, '0');
                return year + '-' + month + '-' + day;
            }
            this.search.fdatetime[0] = formattedFirstDay
            this.search.fdatetime[1] = formattedLastDay
        },
        getFormattedDate(date){
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            return `${year}-${month}-${day}`;
        },
        upsearch() {
			this.$refs.table.upData(this.search)
		},
        selectAll() {
			this.$message.error("只能单选！")
			this.$refs.table.clearSelection()
		},
        selectionChange(selection){
			this.selection = selection;
            this.getDate()
        },
        async getDate(){
            var res = await this.$API.jiankong.correspond.data.post({code:this.selection.code,fdatetime:this.search.fdatetime});
            this.data = res.data.list
            this.list = res.data.header
        },
    },
};
</script>

<style scoped lang="scss">
</style>
